<template>
    <div>
        <el-dialog title="分享会议" :visible.sync="shareMeetDia" width="514px" center :close-on-click-modal="false">
            <section class="mt_25">
                <div class="flex_dia">
                    <div>
                        <div class="top_title">移动端二维码</div>
                        <p class="top_ms">微信扫描二维码进行分享</p>
                        <el-button type="primary" @click="qrcodeDownload">下载二维码</el-button>
                    </div>
                    <vue-qr style="margin-right: -10px;" id="vueQr"
                        :text="input3" :size="118" />
                </div>
            </section>
            <section class="mt15 mb55">
                <div class="btm_title">PC端链接</div>
                <div class="top_ms">用户通过电脑端打开链接参加会议</div>
                <div>
                    <el-input placeholder="请输入内容" disabled v-model="input3" class="input-with-select">
                        <el-button slot="append" class="share_butn" @click="copyHref()">复制分享链接</el-button>
                    </el-input>
                </div>
            </section>
        </el-dialog>
    </div>
</template>

<script>
import VueQr from "vue-qr";
export default {
    components: {
        VueQr
    },
    data() {
        return {
            shareMeetDia: false,
            input3: 'https://www.instrument.com.cn/webinar/meeting_20374.html'
        }
    },
    methods: {
        //base64转blob
        base64ToBlob(code) {
            let parts = code.split(';base64,')
            let contentType = parts[0].split(':')[1]
            let raw = window.atob(parts[1])
            let rawLength = raw.length
            let uInt8Array = new Uint8Array(rawLength)
            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i)
            }
            return new Blob([uInt8Array], { type: contentType })
        },

        //下载二维码
        qrcodeDownload() {
            let fileName = '二维码.png' //下载图片的名字
            let img = document.getElementById('vueQr').src //获取到图片的base64
            let aLink = document.createElement('a') //动态创建一个a标签
            let blob = this.base64ToBlob(img) //将base64转换为blob
            let evt = document.createEvent('HTMLEvents') //动态创建一个event对象
            evt.initEvent('click', true, true) //初始化一个点击事件
            aLink.download = fileName
            aLink.href = URL.createObjectURL(blob) //将blob同步到a标签的href属性上
            aLink.click() //触发点击事件
        },

        copyHref() {
            this.copy(this.input3);
        },
        // 复制功能
        copy(data) {
            // 存储传递过来的数据
            const OrderNumber = data;
            // 创建一个input 元素
            // createElement() 方法通过指定名称创建一个元素
            const newInput = document.createElement("input");
            // 讲存储的数据赋值给input的value值
            newInput.value = OrderNumber;
            // appendChild() 方法向节点添加最后一个子节点。
            document.body.appendChild(newInput);
            // 选中input元素中的文本
            // select() 方法用于选择该元素中的文本。
            newInput.select();
            // 执行浏览器复制命令
            //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
            document.execCommand("Copy");
            // 清空输入框
            newInput.remove();
            // 下面是element的弹窗 不需要的自行删除就好
            this.$message({
                message: "复制成功",
                type: "success",
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.mt_25 {
    margin-top: -20px;

    .flex_dia {
        @include flex(row, center, space-between);

        .top_title {
            font-size: 16px;
            font-family: PingFang SC-Semibold, PingFang SC;
            font-weight: 600;
            color: #37474F;
            line-height: 19px;
            margin-bottom: 8px;
        }

    }
}

.btm_title {
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #37474F;
    line-height: 19px;
    margin-bottom: 8px;
}

.top_ms {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #A3ADB7;
    line-height: 16px;
    margin-bottom: 14px;
}

::v-deep .el-dialog__header {
    background: #f5f8fc;
    text-align: left;
    font-size: 16px;
    color: #202933;
    padding: 11px 16px;
}

.mb55 {
    margin-bottom: 50px;
}

::v-deep .el-dialog__body {
    padding: 5px 10px 10px 32px !important;
}

::v-deep .el-dialog__title {
    font-size: 16px;
}

.share_butn {
    color: #FFF !important;
    background-color: #409EFF !important;
    border-color: #409EFF !important;
    padding: 11px 20px !important;
    margin-bottom: -7px;
    border-radius: 0;
}</style>